<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">聊天</block>
		</cu-custom>
		<view class="cu-chat">
			<view class="cu-item self">
				<view class="main">
					<view class="content bg-green shadow">
						<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
					</view>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">2018年3月23日 13:23</view>
			</view>
			<view class="cu-info round">对方撤回一条消息!</view>
			<view class="cu-item">
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
				<view class="main">
					<view class="content shadow">
						<text>喵喵喵！喵喵喵！</text>
					</view>
				</view>
				<view class="date "> 13:23</view>
			</view>
			<view class="cu-info">
				<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
			</view>
			<view class="cu-info">
				对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
				<text class="text-blue">发送好友验证</text>
			</view>
			<view class="cu-item self">
				<view class="main">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix">
					</image>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date"> 13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action text-bold text-grey">
						3"
					</view>
					<view class="content shadow">
						<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
					</view>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item self">
				<view class="main">
					<view class="action">
						<text class="cuIcon-locationfill text-orange text-xxl"></text>
					</view>
					<view class="content shadow">
						喵星球，喵喵市
					</view>
				</view>
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view>
			<view class="cu-item">
				<view class="cu-avatar radius"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
				<view class="main">
					<view class="content shadow">
						@#$^&**
					</view>
					<view class="action text-grey">
						<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
					</view>
				</view>
				<view class="date">13:23</view>
			</view>
		</view>

		<view class="cu-bar foot input" :style="[{ bottom: InputBottom + 'px' }]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
				@focus="InputFocus" @blur="InputBlur">
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow">发送</button>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			InputBottom: 0,
			        a_uid: -1, //用户uid
			        p_uid: -1,  //对方uid
			        page: 1,
			        message: [],  //页面渲染用的数据
			
		};
	},
	// onLoad: function(options) {
	//         let that = this
	//         that.data.p_uid = options.uid
	//         that.data.a_uid = wx.getStorageSync('uid')
	//         getMessage(that)
	//         wx.setNavigationBarTitle({
	//             title: options.nickname
	//         })
	
	//         const eventChannel = this.getOpenerEventChannel()
	//         //监听newMsgChannel
	//         eventChannel.on('newMsgChannel', function(data) {
	//             //新消息加到数组末尾
	//             data.data.isSelf = false
	//             const d = that.data.message
	//             d[d.length] = data.data
	//             that.setData({
	//                 message: d
	//             })
	//             let read = {}
	//             read.type = 'read'
	//             read.token = wx.getStorageSync(app.globalData.nameOfCookie),
	//                 read.passive_uid = that.data.p_uid
	//             read.mid = data.data.mid
	//             sendMsg(read)
	//                 //console.log(read)
	//             setTimeout(() => {
	//                 that.pageScrollToBottom()
	//             }, 200)
	//         })
	//         //监听messageSendChannel
	//         eventChannel.on('messageSendChannel', function(data) {
	//             data.data.isSelf = true
	//             const d = that.data.message
	//             d[d.length] = data.data
	//             that.setData({
	//                 message: d
	//             })
	//             setTimeout(() => {
	//                 that.pageScrollToBottom()
	//             }, 100)
	//         })
	
	//     },
	methods: {
		/* 用户发送消息 */
		push() {
		        let that = this
		        let tosend = {}
		        tosend.type = 'push'
		        tosend.token = wx.getStorageSync(app.globalData.nameOfCookie)
		        tosend.passive_uid = that.data.p_uid
		        tosend.timestamp = new Date().getTime()
		        tosend.content = that.data.text
		        tosend.content_type = 'text'
		        if (that.data.text && that.data.uid != -1) {
		            sendMsg(tosend)
		        }
		        that.data.value = ''
		        that.setData({
		            value: '',
		            disabled: true
		        })
		    },
		InputFocus(e) {
			this.InputBottom = e.detail.height
		},
		InputBlur(e) {
			this.InputBottom = 0
		}
	}
}
</script>

<style>
page {
	padding-bottom: 100upx;
}
</style>
